<template>
  <div class="page">
    <div class="pageInner">
      <div class="loadingTrainWrap">
        <div class="loadingTrain" :style="'left:'+'-'+processPercent+'rem'"></div>
      </div>
      <div class="processNum">{{percentNum}}</div>
    </div>
    <div class="loadingpre"> <img class="" src="@/assets/images/ticketCouplets.jpg" alt=""></div>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {
  name: 'loading',
  data () {
    return {
      processPercent: 6.31,
      timer: null,
      percentNum: 0
    }
  },
  mounted(){
    this.startLoading();
  },
  methods:{
    startLoading(){
      this.timer = setInterval(()=>{
        this.processPercent=(this.processPercent-0.1).toFixed(2);
        if(this.processPercent<=0){
          this.processPercent = 0;
          this.percentNum = parseInt(parseFloat(((6.31-this.processPercent)/6.31).toFixed(2))*100)+'%';
          clearInterval(this.timer);
          setTimeout(() => {
            this.$router.replace({
              path:"/home"
            })
          }, 1000);
        }else{
          this.percentNum = parseInt(parseFloat(((6.31-this.processPercent)/6.31).toFixed(2))*100)+'%';
        }
      },20)
    }
  }
}
</script>
<style scoped>
  .loadingpre{
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 1px;
    opacity: 0;
    overflow: hidden;
  }
  .pageInner{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .loadingTrainWrap{
    width: 5.12rem;
    height: .24rem;
    position: absolute;
    top: 5.69rem;
    left: 1.19rem;
  }
  .loadingTrain{
    width: 5.12rem;
    height: .24rem;
    position: relative;
    left: 0;
    background-image: url(~@/assets/images/train.png);
    background-size: 5.12rem .24rem;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .processNum{
    text-align: center;
    font-size: .32rem;
    position: absolute;
    width: 7.5rem;
    left: 0;
    top: 6.4rem;
  }
</style>


